<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登陆</title>
  <script src="../javascript/vue.js"></script>
  <script src="../javascript/elementui.js"></script>
  <link rel="stylesheet" href="../css/elementui.css">
  <link rel="stylesheet" href="../css/login.css">
</head>

<body style="margin: 0; overflow: hidden;">
  <div id="app" class="main" :style="{ paddingTop: loginForPin ? '40px' : '0px' }" v-cloak>
    <div style="height: 75px;">
      <img src="../img/logo.png" class="logo" @click="dev">
      <div class="appName" :style="{ top: loginForPin ? '8px' : '25px' }">
        <div style="padding-bottom: 10px;">天命锁</div>
        <el-link v-if="loginForPin" type="success" class="proxy" @click="loginForPin = false">重新登陆</el-link>
      </div>
    </div>
    <div class="pin" v-if="loginForPin">
      <div>{{ pinWord[0] }}</div>
      <div>{{ pinWord[1] }}</div>
      <div>{{ pinWord[2] }}</div>
      <div>{{ pinWord[3] }}</div>
    </div>
    <div v-else>
      <el-form>
        <el-form-item>
          <el-input v-model="username" prefix-icon="el-icon-user-solid" placeholder="用户名" @keyup.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="password" prefix-icon="el-icon-key" placeholder="密码" type="password" @keyup.enter.native="login"></el-input>
        </el-form-item>
      </el-form>
      <el-link type="success" class="proxy" @click="proxy = true">服务器设置</el-link>
      <el-link type="success" class="proxy" @click="clear">清除缓存</el-link>
      <div class="loginButton" @click="login" ref="login">{{ loginButton }}</div>
    </div>
    <el-drawer :visible.sync="proxy" direction="btt" :show-close="false" size="40%">
      <el-form>
        <el-form-item style="padding: 0 20px;">
          <el-input placeholder="127.0.0.1:3000" v-model="host">
            <el-select v-model="protocol" slot="prepend" placeholder="请选择" class="input-with-select">
              <el-option label="http://" value="http"></el-option>
              <el-option label="https://" value="https"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-switch v-model="proxySwitch" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        <span class="proxyTitle">是否启用</span>
      </el-form>
    </el-drawer>
  </div>
  <script src="../javascript/login.js"></script>
</body>

</html>